<template>
  <div class="title">Genome Data Viewer</div>
  <el-form style="" label-width="auto" label-position="top">
    <el-row gutter="24">
      <el-col :span="7">
        <el-form-item label="">
          <div
            style="display: flex; justify-content: space-between; width: 100%"
          >
            <el-input
              v-model="searchData.genemoId"
              @clear="getGeneBrowserData"
              clearable
              placeholder="Please input genome id or organism name"
            />
            <el-button type="primary" @click="getGeneBrowserData"
              >Search</el-button
            >
          </div>
        </el-form-item>
      </el-col>
      <el-col :span="4">
        <el-form-item label="">
          <el-select
            v-model="searchData.type"
            @change="changeType"
            placeholder="please select"
          >
            <el-option label="Bacteria" value="bacteria" />
            <el-option label="Viruses" value="viruses" />
            <el-option label="Fungi" value="fungi" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  <el-table
    :data="tableData"
    stripe
    v-loading="tableLoading"
    style="width: 100%; border: 1px solid #d7d7d7; font-size: 17px"
  >
    <el-table-column sortable prop="GENOME_ID" label="Genome id" width="180" />
    <el-table-column sortable prop="ORGANISM_NAME" label="Organism name">
      <template #default="scope">
        <a
          style="color: #0c4270 !important"
          target="_blank"
          :href="`https://www.ncbi.nlm.nih.gov/Taxonomy/Browser/wwwtax.cgi?id=${scope.row.TAXID}`"
          >{{ scope.row.ORGANISM_NAME }}</a
        >
      </template>
    </el-table-column>
    <el-table-column sortable prop="STRAIN" label="Strain" />
    <el-table-column prop="Action" label="Action" align="center">
      <template #default="scope">
        <button class="btn" @click="toJbrowse(scope.row)">
          Genome Browser
        </button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    class="elPagination"
    @change="changePagination"
    layout="->,prev, pager, next"
    background
    :total="total"
  />
</template>

<script setup>
import { ref, onMounted } from "vue";
import router from "@/router/index";
import { geneBrowserData, geneBrowserLocation } from "@/api/jbrowseTable.js";
import { dataBrowseSearch } from "@/api/search.js";
const searchData = ref({
  type: "viruses",
  pageSize: 10,
  page: 1,
});
const tableLoading = ref(false);
const total = ref(0);
const genomeIdList = ref([]);
const tableData = ref([]);
onMounted(() => {
  getGeneBrowserData();
});
const getGeneBrowserData = async () => {
  tableLoading.value = true;
  const res = await geneBrowserData(searchData.value);
  total.value = res.data.count;
  tableData.value = res.data.data;
  genomeIdList.value = res.data.data2;
  tableLoading.value = false;
};
const changeType = (val) => {
  searchData.value.type = val;
  getGeneBrowserData();
};
const toJbrowse = (row) => {
  console.log(row);
  let params = {
    type: searchData.value.type,
    genemoId: row.GENOME_ID,
  };
  geneBrowserLocation(params).then((res) => {
    const resData = res.data.data;
    // 跳转路由
    localStorage.setItem(
      "genomeBrowserData",
      JSON.stringify({
        type: searchData.value.type,
        genomeId: row.GENOME_ID,
        GENE_LOCATION: resData.LOCATION,
        RefName: resData.RefName,
      })
    );
    // router.push("/genomeBrowser");
    const url = `https://www.primerbanks.com/jbrowse/?config=${searchData.value.type}/${row.GENOME_ID}/${row.GENOME_ID}_browse.json`;
    window.open(url, "_blank");
  });
};
const changeGenomeId = (val) => {
  console.log("changeGenomeId", val);
  getGeneBrowserData();
};
const changePagination = (val) => {
  searchData.value.page = val;
  getGeneBrowserData();
};
</script>
<style lang="scss" scoped>
* {
  text-align: left;
}

.title {
  font-size: 28px;
  font-weight: bold;
  line-height: 80px;
  text-align: left;
}

/* From Uiverse.io by barisdogansutcu */
.btn {
  padding: 14px 20px;
  margin: 5px;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  font-weight: 600;
  // background-color: rgb(255, 255, 255);
  // border: 1px solid #d7d7d7;
  box-shadow: rgb(0 0 0 / 5%) 0 0 8px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-size: 10px;
  transition: all 0.5s ease;
  background: #fa8bb336 !important;
  border: 1px solid #ff90b9 !important;
}

.btn:hover {
  letter-spacing: 3px;
  background-color: #0066cc;
  color: #000;
  // box-shadow: rgb(93 24 220) 0px 7px 29px 0px;
}

.btn:active {
  letter-spacing: 3px;
  background-color: #0066cc;
  color: #000;
  box-shadow: #0066cc;
  transform: translateY(10px);
  transition: 100ms;
}

.elPagination {
  margin: 20px 0;
}

::v-deep .el-pager li.is-active {
  background: #0c4270 !important;
  color: #fff !important;
}

::v-deep tr.el-table__row--striped td.el-table__cell {
  background-color: #eff5fa !important;
}

::v-deep .el-card__header {
  padding: 8px;
  background-color: #0c4270 !important;
  color: #fff;
  font-weight: bold;
}

::v-deep .el-table__header th {
  background-color: #0c4270 !important;
  color: #fff;
}
</style>
